<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姜启航">
    <title>唯品会</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/base.css">
</head>
<body>
    <!--顶部导航条  -->
<nav class="top-nav">
    <div class="container">
        <div class="left">
            <div class="diqu">
            <span class="diqu-span">河南</span>
            <span class="jiantou henan"></span>       
            
            <div class="left-menu">
                <span class="bg-white"></span>
                <p>请选择所在的收货地区</p>
                <table>
                    <tr>
                        <th>A</th>
                        <td>
                            <span>安徽</span>

                            <span>澳门</span>
                        </td>
                    </tr>
                    <tr>
                        <th>B</th>
                        <td>
                            <span>北京</span>
                        </td>
                    </tr>
                    <tr>
                        <th>C</th>
                        <td><span>重庆</span></td>
                    </tr>
                    <tr>
                        <th>F</th>
                        <td><span>福建</span></td>
                    </tr>
                    <tr>
                        <th>G</th>
                        <td><span>广西</span> <span>广东</span></td>
                    </tr>
                </table>    
            </div>
            </div>
        </div>
        <ul class="right">
            <li class="login li-gg"><a href="#">请登录</a>
                
                <div class="left-menu">
                    <span class="bg-white"></span>
                    <span class="xiaohai"></span>
                    <p><a href="#">您好！[请登录]</a></p>
                    <span><a href="#">我的收藏</a></span>
                    <span><a href="#">我的订单</a></span>
                    <span><a href="#">零钱</a></span>
                    <span><a href="#">我的优惠券</a></span>
                    <span><a href="#">我的唯品币</a></span>
                    <span><a href="#">唯品金融</a></span>
                </div>
            </li>
            <li><span class="xiegang"></span></li>
            <li><a href="#">注册</a></li>
            <li><span class="xiegang"></span></li>
            
            <li class="qiandao-li"><span class="qiandao"></span> 签到有礼
            <div class="qiandao-div">
                        <ul class="day">
                            <span class="qiandao-span"></span>
                            <li>
                                <span></span>
                                <p>1天</p>
                            </li>
                            <li>
                               <span></span>
                                <p>2天</p>
                            </li>
                            <li>
                                <span></span>
                                <p>3天</p>
                            </li>
                            <li>
                                <span></span>
                                <p>4天</p>
                            </li>
                            <li>
                                <span></span>
                                <p>5天</p>
                            </li>
                            <li>
                                <span></span>
                                <p>6天</p>
                            </li>
                            <li>
                               <span></span>
                                <p>7天</p>
                            </li>
                        </ul>
                        <div class="qiandao-btn">
                            <a href="javascript:;">每天签到送惊喜， 连续签到更享心动奖励</a>
                            <button type="button">签到</button>
                        </div>
                     </div> 
            </li>
            <li><span class="xiegang"></span></li>
            <li><a href="#">我的订单</a></li>
            <li><span class="xiegang"></span></li>
            <li class="temai mytm li-gg"><a href="#">我的特卖</a><span class="jiantou"></span>
            
                <div class="left-menu">
                    <span class="bg-white"></span>
                <span><a href="#">品牌收藏(0)</a></span>
                <span><a href="#">商品收藏(0)</a></span>
                <span><a href="#">我的足迹(0)</a></span>
            </div>
            </li>

            <li><span class="xiegang"></span></li>
            <li class="temai VIP li-gg"><a href="#">会员俱乐部</a><span class="jiantou"></span>
            
                <div class="left-menu">
                     <span class="bg-white"></span>
                <span><a href="#">俱乐部首页</a></span>
                <span><a href="#">唯品币兑换</a></span>
                <span><a href="#">免费抽大奖</a></span>
            </div>
            </li>
            <li><span class="xiegang"></span></li>
            <li class="temai kehu li-gg"><a href="#">客户服务</a><span class="jiantou"></span>
            
                <div class="left-menu">
                    <span class="bg-white"></span>
                <span><a href="#">联系客服</a></span>
                <span><a href="#">帮助中心</a></span>
                <span><a href="#">服务中心</a></span>
                <span><a href="#">知识产权投诉</a></span>            </div>
            </li>
            <li><span class="xiegang"></span></li>
            <li class="temai li-phone li-gg"><span class="phone"></span><a href="#">手机版</a>
            
                <div class="left-menu">
                    <span class="bg-white"></span>
                <span><a href="#"><img src="./img/1466134037230.jpg" alt=""></a></span>
                <span><a href="#">随时逛 及时抢</a></span>
            </div>
            </li>
            <li><span class="xiegang"></span></li>
            <li class="gengduo li-gg"><a href="#">更多</a><span class="jiantou"></span>
           
                <div class="left-menu">
                     <span class="bg-white"></span>
                <h5>合作专区</h5>
                <span>
                    <a href="#">联名卡申请</a>
                    <a href="#">唯品卡</a>
                    <a href="#">支付专区</a>
                </span>
                 <h5 class="women">关于我们</h5>
                <span>
                    <a href="#">Sell on vip</a>
                    <a href="#">品牌招商</a>
                    <a href="#">官方微博</a>
                </span>
            </div>
            </li>
        </ul>
    </div>
</nav>
<!--头部  -->
<header>
    <div class="container">
        <div class="header">
        <img src="./img/1496219375910.png" alt="">
        <div class="img-left">
        <a href="#"><img src="./img/1466131264367.png" alt=""></a>
        <a href="#"><img src="./img/1466131266290.png" alt=""></a>
        <a href="#"><img src="./img/1466131268726.png" alt=""></a>  
        <!-- <div class="gouwu-div"><a class="a-left"><span class="gouwu"></span>我的购物袋</a></div>
            <div class="gouwudai">
            </div> -->
            <ul class="ul-gouwu">
                <li class="temai gouwu"><span class="gouwudai"></span><a href="#">我的购物袋</a>
            <div class="left-menu">
                 好像还未登录！<a href="#">马上登录</a> 查看购物袋吧！
            </div>
            </li>
            </ul>
             
        </div>
        </div>
       
    </div>
</header>
<!--导航菜单  -->
<nav class="nav">
    <div class="container">
        <ul class="ul-right">
            <li class="shouye"><a href="#">首页</a></li>
            <li><a href="#">唯品国际</a></li>
            <li><a href="#">母婴</a></li>
            <li><a href="#">家具家电</a></li>
            <li><a href="#">男士</a></li>
            <li><a href="#">美妆</a></li>
            <li><a href="#">生活超市</a></li>
            <li><a href="#">金融</a></li>
            <li class="more-li"><a href="#">更多</a>
            <div class="more">
                <div class="more-div"><img src="./img/1467620677036.jpg" alt=""></div>
                <a href="#"><div class="cover nv">女装</div></a>
                
                <div class="more-div"><img src="./img/1467620750077.jpg" alt=""></div>
                <a href="#"><div class="cover xie">鞋包</div></a>
                <div class="more-div"><img src="./img/1467620773404.jpg" alt=""></div>
                <a href="#"><div class="cover pei">配饰</div></a>
                <div class="more-div"><img src="./img/1467620790247.jpg" alt=""></div>
                <a href="#"><div class="cover yun">运动</div></a>
                <div class="more-div"><img src="./img/1467620841997.jpg" alt=""></div>
                <a href="#"><div class="cover wei">唯品.奢</div></a>
            </div>
            </li>
        </ul>
        <ul class="ul-left">
            <li><a href="#"><span class="fenlei"></span> 分类</a></li>
            <li class="yugaode"><a href="#"><span class="yugao"></span> 预告</a></li>
        </ul>
    </div>
</nav>
<!--轮播图  -->
<main>
    <div class="zhuti">
        <div class="container">
            <div class="box">
                <ul class="img-list">
                    <li class="current"><a href="#"><img src="./img/lunbo01.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/lunbo02.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/lunbo03.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./img/lunbo04.jpg" alt=""></a></li>
                </ul>
                <ul class="indicator">
                    <li class="active"><a href="#">欧莱雅集团VIP大牌日</a></li>
                    <li><a href="#">时尚风暴 最高满199减40</a></li>
                    <li><a href="#">居家夏末福利大派送</a></li>
                    <li><a href="#">全球早秋扫货指南</a></li>
                    
                </ul>
                <div class="img-click">
                    <span class="prev">&lt;</span>
                    <span class="next">&gt;</span>
                </div>
            </div>
        </div>
    </div>
</main>
<!--实时热销榜  -->
<div class="main">
    <div class="container">
        <div class="rexiao">
            <div>
            <img src="./img/1502078817176.jpg" alt="">
            <span class="TOP top1"></span>
            <img src="./img/1502078828997.jpg" alt="">
            <span class="TOP top2"></span>
            <img src="./img/1502078840972.jpg" alt="">
            <span class="TOP top3"></span>
            </div>
           
        </div>
    </div>
</div>
<div class="div-main">
    
</div>

<!--右侧导航栏  -->
<div class="div-right">
      <div class="div-top">
        <a class="a-one" href="#">
            <span class="zh-span"></span>
            <div class="id-div">
                <span class="xiaohaizi"></span>
                <span class="close">&times;</span>
                <p>您好！请 <span>登录</span> | <span>注册</span></p>
                <div class="zh-div">
                    <section class="zh-left">
                        <span class="dingdan"></span>
                        <p class="dingdan-p">我的订单</p>
                    </section>
                    <section class="zh-right" >
                        <span class="xiaoxi"></span>
                        <p class="xiaoxi-p">我的消息</p>
                    </section>
                </div>
                <p class="VIP-p">会员俱乐部</p>
            </div>
        </a>
        <a class="bag" href="#"><span class="bag-span"></span><br>购<br>物<br>袋<br><span class="shuzi">0</span></a>
        <a class="yhj" href="#">
            <span class="yhj-span"></span>
            <div class="gg-div">
                <p>我的优惠券</p>
            </div>
        </a>

        <a class="ppsc" href="#">
            <span class="ppsc-span"></span>
            <div class="gg-div">
                <p>品牌收藏</p>
            </div>
        </a>

        <a class="spsc" href="#">
            <span class="spsc-span "></span>
            <div class="gg-div">
                <p>商品收藏</p>
            </div>
        </a>
        <a class="zj" href="#">
            <span class="zj-span"></span>
            <div class="gg-div">
                <p>我的足迹</p>
            </div>
        </a>
        
        
        
        <a href="#" class="VIPfk">
            <span class="VIPfk-span"></span>
            <div class="gg-div">
                <p>会员反馈</p>
            </div>
        </a>
         <a href="#" class="fhdb">
            <span class="fhdb-span"></span>
            <div class="gg-div">
                <p>返回顶部</p>
            </div>
        </a>
       </div>

    </div>
</body>
</html>

<script src='js/index.js'>

</script>
